<template>
  <div class="dangerous-action-test">
    <n-card title="高危操作确认组件测试" :bordered="false" size="small" class="h-full shadow-sm rounded-8px">
      <n-space vertical size="large">
        <!-- 说明 -->
        <n-card title="功能说明" size="small">
          <n-alert type="info" :show-icon="false">
            <p class="mb-8px">高危操作确认组件用于需要管理员密码验证的危险操作，如删除重要数据。</p>
            <p class="mb-8px"><strong>安全特性：</strong></p>
            <ul class="ml-16px">
              <li>需要输入管理员密码</li>
              <li>需要勾选两个确认选项</li>
              <li>显示详细的删除项目信息</li>
              <li>列出操作风险提示</li>
              <li>防止误操作的多重保护</li>
            </ul>
          </n-alert>
        </n-card>

        <!-- 测试按钮 -->
        <n-card title="测试操作" size="small">
          <n-space>
            <n-button type="error" @click="testDomainDelete">
              测试删除领域
            </n-button>
            <n-button type="error" @click="testExpertDelete">
              测试删除专家
            </n-button>
            <n-button type="warning" @click="testCustomDelete">
              自定义测试
            </n-button>
          </n-space>
        </n-card>

        <!-- 测试结果 -->
        <n-card title="测试结果" size="small" v-if="testResults.length > 0">
          <n-timeline>
            <n-timeline-item
              v-for="(result, index) in testResults"
              :key="index"
              :type="result.type"
              :title="result.title"
              :content="result.content"
              :time="result.time"
            />
          </n-timeline>
        </n-card>

        <!-- 使用说明 -->
        <n-card title="使用说明" size="small">
          <n-space vertical>
            <div>
              <strong>1. 在业务模块中导入组件：</strong>
              <n-code language="javascript" :code="importCode" />
            </div>
            <div>
              <strong>2. 在模板中使用：</strong>
              <n-code language="vue" :code="templateCode" />
            </div>
            <div>
              <strong>3. 在脚本中处理：</strong>
              <n-code language="javascript" :code="scriptCode" />
            </div>
          </n-space>
        </n-card>
      </n-space>
    </n-card>

    <!-- 高危删除确认弹窗 -->
    <DangerousActionConfirm
      v-model:visible="deleteConfirmVisible"
      :title="currentTest.title"
      :description="currentTest.description"
      :item-info="currentTest.itemInfo"
      :risks="currentTest.risks"
      @confirm="handleConfirmDelete"
      @cancel="handleCancelDelete"
      ref="deleteConfirmRef"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useMessage } from 'naive-ui'
import DangerousActionConfirm from '@/components/DangerousActionConfirm.vue'

const message = useMessage()

// 删除确认相关
const deleteConfirmVisible = ref(false)
const deleteConfirmRef = ref()
const currentTest = reactive({
  title: '',
  description: '',
  itemInfo: {},
  risks: []
})

// 测试结果
const testResults = ref([])

// 代码示例
const importCode = `import DangerousActionConfirm from '@/components/DangerousActionConfirm.vue'`

const templateCode = `<DangerousActionConfirm
  v-model:visible="deleteConfirmVisible"
  :title="删除标题"
  :description="删除描述"
  :item-info="删除项目信息"
  :risks="风险列表"
  @confirm="handleConfirmDelete"
  @cancel="handleCancelDelete"
  ref="deleteConfirmRef"
/>`

const scriptCode = `// 显示删除确认
const handleDelete = (item) => {
  currentDeleteItem.value = item
  deleteConfirmVisible.value = true
}

// 确认删除
const handleConfirmDelete = async (password) => {
  try {
    // 验证密码并执行删除
    await deleteApi(currentDeleteItem.value.id)
    message.success('删除成功')
    deleteConfirmVisible.value = false
  } catch (error) {
    message.error('删除失败')
  } finally {
    deleteConfirmRef.value?.setLoading(false)
  }
}`

// 测试删除领域
const testDomainDelete = () => {
  Object.assign(currentTest, {
    title: '删除领域: 育儿专家',
    description: '您即将删除领域「育儿专家」，此操作将同时删除该领域下的所有专家和相关数据。',
    itemInfo: {
      'ID': 1,
      '领域名称': '育儿专家',
      '描述': '专业的育儿指导和建议',
      '专家数量': 5,
      '启用状态': '启用',
      '排序权重': 100,
      '创建时间': '2024-01-01 10:00:00'
    },
    risks: [
      '删除后该领域将无法恢复',
      '该领域下的 5 个专家将被同时删除',
      '所有相关的问答记录将失去领域关联',
      '用户将无法再向该领域的专家提问',
      '相关的统计数据将受到影响',
      '如果有正在进行的问答，可能会受到影响'
    ]
  })
  deleteConfirmVisible.value = true
}

// 测试删除专家
const testExpertDelete = () => {
  Object.assign(currentTest, {
    title: '删除专家: 张医生',
    description: '您即将删除专家「张医生」，此操作将删除该专家的所有信息和相关数据。',
    itemInfo: {
      'ID': 1,
      '专家昵称': '张医生',
      '真实姓名': '张三',
      '所属领域': '育儿专家',
      '专业描述': '儿科主任医师，20年临床经验',
      '启用状态': '启用',
      '排序权重': 100,
      '创建时间': '2024-01-01 10:00:00'
    },
    risks: [
      '删除后该专家信息将无法恢复',
      '该专家的所有经典案例将被删除',
      '用户将无法再向该专家提问',
      '所有相关的问答记录将失去专家关联',
      '专家的头像和展示图片将被删除',
      '相关的统计数据将受到影响'
    ]
  })
  deleteConfirmVisible.value = true
}

// 自定义测试
const testCustomDelete = () => {
  Object.assign(currentTest, {
    title: '删除测试项目: 重要数据',
    description: '这是一个自定义的高危删除操作测试，用于验证组件的各项功能。',
    itemInfo: {
      '项目名称': '重要数据',
      '项目类型': '测试数据',
      '数据量': '1000条',
      '创建时间': '2024-01-01 10:00:00',
      '最后修改': '2024-07-24 16:00:00'
    },
    risks: [
      '这是一个测试操作，不会真正删除数据',
      '用于验证密码输入功能',
      '用于验证确认选项功能',
      '用于验证界面显示效果',
      '请输入任意6位以上字符作为测试密码'
    ]
  })
  deleteConfirmVisible.value = true
}

// 确认删除
const handleConfirmDelete = async (password: string) => {
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 记录测试结果
    testResults.value.unshift({
      type: 'success',
      title: '删除操作成功',
      content: `密码: ${password}, 项目: ${currentTest.title}`,
      time: new Date().toLocaleTimeString()
    })
    
    message.success('测试删除操作成功')
    deleteConfirmVisible.value = false
  } catch (error) {
    testResults.value.unshift({
      type: 'error',
      title: '删除操作失败',
      content: `错误信息: ${error.message}`,
      time: new Date().toLocaleTimeString()
    })
    message.error('测试删除操作失败')
  } finally {
    deleteConfirmRef.value?.setLoading(false)
  }
}

// 取消删除
const handleCancelDelete = () => {
  testResults.value.unshift({
    type: 'warning',
    title: '删除操作已取消',
    content: `项目: ${currentTest.title}`,
    time: new Date().toLocaleTimeString()
  })
  message.info('删除操作已取消')
}
</script>

<style scoped>
.dangerous-action-test {
  padding: 20px;
}

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin-bottom: 4px;
}
</style>
